<template>
	
	<wd-tabs v-model="tab">
		<block v-for="item in Data.Tabs" :key="item">
			<wd-tab :title="item">
			</wd-tab>
		</block>
	</wd-tabs>
	
	<view class="logoff-list" v-if="Data.list.length">
		<view class="logoff-list-li" v-for="(d,index) in Data.list">
			<view class="logoff-list-li-content">
				<userAvatar :src="d.avatar" :size="80" radius="50%"></userAvatar>
				<view class="logoff-list-li-content-info">
					<text class="logoff-list-li-content-info-username">{{d.username}}</text>
					<text>注销原因</text>
					<text>注销时间</text>
				</view>
			</view>
			<view class="logoff-list-li-options">
				<view class="logoff-list-li-options-left">
					<text></text>
				</view>
				<view class="logoff-list-li-options-right">
					<wd-button size="small" hairline @click="clickEdit(li)">拒绝</wd-button>
					<wd-button size="small"
						hairline @click="clickEdit(li)">同意</wd-button>
				</view>
			</view>
		</view>

	</view>

	<wd-status-tip v-else image="search" tip="暂无内容" />

</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onReady
	} from "@dcloudio/uni-app"

	const Data = reactive({
		Tabs:[
			"注销中","已注销"
		],
		list: [],
		page: 1,
		pages: null,
		limit: 10,
		total: null,
	})

	// 滚动页面底部
	onReachBottom(() => {
		let page = Data.page
		let pages = Data.pages
		if (page >= pages) {
			return
		} else {
			Data.page++
			GetLogoffList()
		}
	})

	function GetLogoffList() {
		let page = Data.page
		let limit = Data.limit
		let url = "/manage/LogoffList"
		overallRequest(url, {
			data: {
				page,
				limit
			}
		}).then(res => {
			let {
				data
			} = res
			let {
				page,
				pages,
				limit,
				total,
				list
			} = data
			Data.list = list
			Data.page = page
			Data.page = pages
			Data.total = total
			Data.limit = limit
		})
	}

	onLoad(() => {
		GetLogoffList()
	})
</script>

<style scoped>
	page {
		height: 100%;
	}

	.logoff-list {
		display: flex;
		flex-direction: column;
		background: #c3c3c322;
		gap: 15px;
		padding: 30rpx 20px;
		height: 100%;
	}

	.logoff-list-li {
		display: flex;
		flex-direction: column;
		padding: 20rpx 20rpx;
		padding-left: 35rpx;
		box-sizing: border-box;
		background: white;
		border-radius: 10px;
	}

	.logoff-list-li-content {
		width: 100%;
		display: flex;
		gap: 25rpx;
	}

	.logoff-list-li-content-info {
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		gap: 6px;
		color: #8c8c8c;
	}

	.logoff-list-li-content-info-username {
		color: black;
		font-size: 25rpx;
	}

	.logoff-list-li-options {
		display: flex;
		margin-top: 20rpx;
		border-top: 1rpx solid #d9d9d944;
		padding-top: 20rpx;
	}

	.logoff-list-li-options-left {
		flex: 1;
	}

	.logoff-list-li-options-right {
		align-items: center;
		display: flex;
		gap: 15rpx;
	}
</style>